<template>
  <div>
    <Tooltip title="自定义过滤">
      <FilterFilled @click="openFilter" />
    </Tooltip>
    <TableFilter @register="registerFilterModal" @success="redo" />
  </div>
</template>

<script setup lang="ts">
  import { defineComponent, onMounted, ref } from 'vue';
  import { Tooltip } from 'ant-design-vue';
  import { FilterFilled } from '@ant-design/icons-vue';
  import TableFilter from '/@/components/TableFilter/index.vue';
  import { useModal } from '@/components/Modal';
  import { useTableContext } from '../Table/src/hooks/useTableContext';

  defineComponent({
    name: 'TableCustomerFilter'
  });

  const ConModelsJson = ref('');
  const table = useTableContext();
  const [registerFilterModal, { openModal: openFilterModal }] = useModal();

  function openFilter() {
    openFilterModal(true, {
      columns: table.getColumns({
        ignoreAction: true,
        ignoreIndex: true
      })
    });
  }

  function redo({ conModels }) {
    ConModelsJson.value = conModels;
    table.reload();
  }

  onMounted(() => {
    table.setProps({
      handleSearchInfoFn: (params) => {
        if (ConModelsJson.value) params['conModels'] = ConModelsJson.value;
      },
      beforeFetch: (params) => {
        if (ConModelsJson.value) params['conModels'] = ConModelsJson.value;
      }
    });
  });
</script>
